<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML>
<html>
  <head>
    <base href="<%=basePath%>">
    <script src="page/js/setting/role/role.js?v=1"></script>
    <jsp:include page="/page/common/confirmAndAlert.jsp" />
  </head>
  <body>
    <div class="am-form am-form-inline default-height">
    <div class="am-g am-padding ">
        <div class="am-u-sm-12 am-padding-right-0">
          <div class="am-btn-toolbar  am-fr">
            <div class="am-btn-group am-btn-group-xs ">
              <button id="btn_excel" type="button" class="am-btn am-btn-default" onclick="showModal()"><span class="am-icon-plus"></span> 新增</button>
            </div>
          </div>
        </div>
      </div>
  
	  <!-- Main -->
	  <div class="main_div">
		  <!-- Datatables -->
		  <table id="am_tab" class="am-table am-table-hover table-main am-table-bd am-table-striped admin-content-table">
		    <thead>
		        <tr>
		            <th></th>
		            <th>角色名</th>
		            <th>角色功能</th>
		            <th>操作</th>
		        </tr>
		    </thead>
		  </table>
	  </div>
	   </div>
	  
  <!-- Modal -->
	 <div class="am-modal am-modal-no-btn" tabindex="-1" id="am_modal">
	  	<div class="am-modal-dialog">
	  	  <form id="am_form" class="am-form am-form-horizontal" data-am-validator>
	  		<fieldset>
		    	<div class="am-modal-hd font_bolder">
		    		<legend id="am_modal_title">添加</legend>
		      		<a href="javascript: void(0)" class="am-close am-close-spin" data-am-modal-close>&times;</a>
		    	</div>
		    	<div class="am-modal-bd">
					<input type="hidden" id="roleId">
					<input type="hidden" id="parentId">
		      		<div class="am-form-group am-g">
					    <label for="roleName" class="am-u-sm-4 am-form-label">角色名</label>
					    <div class="am-u-sm-8">
					      <input id="roleName" type="text" placeholder="请输入角色名" required/>
					    </div>
					</div>
					</div>
				
		    </fieldset>
	      </form>
	      			  <div class="am-form-group am-g " >
					   <label for="functionIds" class="am-u-sm-4 am-form-label "><span class="am-fr">角色功能</span></label>
					   <!--   <select id="functionIds" type="select"  class="chosen-select" multiple tabindex="8" required>
					    </select>-->
					    	<div class="am-u-sm-8 am-scrollable-vertical" style="text-align:left;height:300px" id="TreeDiv">
											
							<ul class="am-tree firstTree am-tree-folder-select am-left" role="tree" id="firstTree" >
								  <li class="am-tree-branch am-hide" data-template="treebranch" role="treeitem" aria-expanded="false">
									<div class="am-tree-branch-header">
									 
										
										  <input type="checkbox" class="checkboxClass" name="checkboxClass" onclick="checkboxClick(this)" value="">
										   <button class="am-tree-icon am-tree-icon-caret am-icon-caret-right"><span class="am-sr-only">Open</span></button>
										
									  <button class="am-tree-branch-name">
										<span class="am-tree-icon am-tree-icon-folder lll" ></span>
										<span class="am-tree-label am-tree-span"></span>
									  </button>
									</div>
									<ul class="am-tree-branch-children" role="group"></ul>
									<div class="am-tree-loader" role="alert">Loading...</div>
								  </li>
								  <li class="am-tree-item am-hide" onclick="thisNodeTreeTextColor(this)"  data-template="treeitem" role="treeitem">
									<input type="checkbox" class="checkboxClass" name="checkboxClass"  value="">
									<button class="am-tree-item-name">
									   <!-- <span class="am-tree-icon am-tree-icon-item"></span>-->
									  <span class="am-tree-label"></span>
									</button>
								  </li>
							</ul>

						
						</div>
					  </div>
					<div class="am-form-group margin-top am-g">
					    <div class="am-u-sm-10 am-u-sm-offset-1">
					      <button type="button" class="am-btn am-btn-primary" onclick="commitModal()">提交</button>
					      &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 
					      <button type="button" class="am-btn am-btn-primary" onclick="closeModal('#am_modal')">取消</button>
					    </div>
				    </div>
		    	
	      </div>
	      </div>
	 
	 
	  
	  
	  

<!-- 查看角色功能 -->
	<div class="am-modal am-modal-no-btn" tabindex="-1"
		id="am_getfunction">
		<div class="am-modal-dialog">
			<form class="am-form am-form-horizontal">
				<fieldset disabled>
					<div class="am-modal-hd font_bolder">
						<legend>
							<b> 查看角色功能 </b>
						</legend>
						<a href="javascript: void(0)" class="am-close am-close-spin"
							data-am-modal-close>&times;</a>
					</div>
					<div class="am-form-group" >
						<label for="functionNames" class="am-u-sm-3 am-form-label">角色功能</label>
						<div class="am-u-sm-9" id="functionNames">
					</div>
				</fieldset>
				<div style="margin-top:-20px">
					<div class="am-u-sm-10 am-u-sm-offset-1">
						<button type="button" class="am-but am-but-primary" data-am-modal-close>确认查看</button>
					</div>
				</div>
			</form>
		</div>
	</div>
       <ul class="am-tree firstTree am-tree-folder-select" role="tree" id="Treecp">
					  <li class="am-tree-branch am-hide" data-template="treebranch" role="treeitem" aria-expanded="false">
					    <div class="am-tree-branch-header">
								  <input type="checkbox" class="checkboxClass" name="checkboxClass" onclick="checkboxClick(this)"  value="">
					      <button class="am-tree-icon am-tree-icon-caret am-icon-caret-right"><span class="am-sr-only">Open</span></button>
							
									
										
					      <button class="am-tree-branch-name">
					        <span class="am-tree-icon am-tree-icon-folder lll" ></span>
					        <span class="am-tree-label am-tree-span"></span>
					      </button>
					    </div>
					    <ul class="am-tree-branch-children" role="group"></ul>
					    <div class="am-tree-loader" role="alert">Loading...</div>
					  </li>
					  <li class="am-tree-item am-hide" onclick="thisNodeTreeTextColor(this)" data-template="treeitem" role="treeitem">
						<input type="checkbox" class="checkboxClass" name="checkboxClass" value="">
					    <button class="am-tree-item-name">
					     <!-- <span class="am-tree-icon am-tree-icon-item"></span>-->
					      <span class="am-tree-label"></span>
					    </button>
					  </li>
				</ul>
      <body>
      </html>